import Vue from "vue";
import Vuex from "@/vuex";
// import Vuex from "vuex";

function logger() {
  return function (store) {
    // console.log(store);
    let prevState = JSON.stringify(store.state);
    store.subscribe((mutation, state) => {
      // 所有的更新都是基于mutations（状态变化都是通过mutations）
      // 如果直接手动的更改状态， 此subscribe是不会执行的， commit()
      //
      // console.log(mutation, state);
      console.log("prevState:", prevState);
      console.log("mutation:", mutation);
      console.log("currentState:", JSON.stringify(state));
      prevState = JSON.stringify(state);
    });
  };
}

function persists() {
  return function (store) {
    // vuex-persist
    let localState = localStorage.getItem("VUEX:STATE");
    if (localState) {
      store.replaceState(JSON.parse(localState));
    }
    store.subscribe((mutation, rootState) => {
      // 状态发生变化都存在localstorage中
      // 需要做防抖
      localStorage.setItem("VUEX:STATE", JSON.stringify(rootState));
    });
  };
}

Vue.use(Vuex);

export default new Vuex.Store({
  plugins: [
    logger(),
    persists(), // 每次状态变化都可以存入到localStorage中
  ],
  state: {
    // state ==> data
    name: "seven",
    age: 22,
  },
  mutations: {
    // method, commit, 同步更改状态
    changeAge(state, payload) {
      state.age += payload;
    },
  },
  actions: {
    // 异步操作， 调用api接口， dispatch， 多次commit  mutation
    changeAgeSync({ commit }, payload) {
      commit("changeAge", payload);
    },
  },
  strict: true, // 严格模式， 如果不是在mutations中操作的状态会发生警告
  modules: {
    // 进行模块分割
    // namespaced 能解决子模块和父模块的命名冲突文件， 相当于增加了一个命名空间
    // 如果没有namespaced， 默认getters会被定义到父模块上
    // mutations会被合并到一起， 最终一起调用， 有了命名空间这个问题就能被解决
    // 子模块的名字不能和父模块中的状态重名
    a: {
      namespaced: true,
      state: {
        name: "t1",
        age: 10,
      },
      // 所有的getters都会合并到根上
      getters: {
        // 首页一个模块home 订单页一个模块 order 用户一个模块user
        aAge(state) {
          return state.age + 3;
        },
      },
    },
    b: {
      state: {
        name: "t2",
        age: 20,
      },
    },
  }, // 模块分割

  getters: {
    // computed 计算属性
    newAge(state) {
      console.log("newAge执行了");
      return state.age + 10;
    },
  },
});
